iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 11
1

Fragment 簡單試用

fragment是必須包含在activity中的,一個activity可以有多個fragment
fragment有點類似模組,其他activity也可使用同一個fragment

  • A fragment has its own lifecycle and receives its own input events.
  • You can add or remove a fragment while the activity is running.
  • A fragment is defined in a Kotlin class.
  • A fragment's UI is defined in an XML layout file.

新增fragment class

  • 在專案中的Java資料夾,例如com.example.android.fragment
    新增數個fragment(Blank)
  • res/layout中新增對應的xml檔(android studio會自動建立)

再來,要把fragment加到activity_main.xml中
須要一個容器FrameLayout,範例我們加上3個button用於切換fragment
xml如下

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_begin="68dp" />

    <Button
        android:id="@+id/btn_one"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:text="One"
        app:layout_constraintEnd_toStartOf="@+id/btn_two"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintHorizontal_chainStyle="spread"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/btn_two"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="5dp"
        android:text="Two"
        app:layout_constraintBottom_toTopOf="@+id/guideline"
        app:layout_constraintEnd_toStartOf="@+id/btn_three"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/btn_one" />

    <Button
        android:id="@+id/btn_three"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="5dp"
        android:text="Three"
        app:layout_constraintBottom_toTopOf="@+id/guideline"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/btn_two" />

    <FrameLayout
        android:id="@+id/frame_layout"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/guideline">
    </FrameLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

接着到MainActivity.kt寫動作吧!

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val fragmentOne = OneFragment()
        val fragmentTwo = TwoFragment()
        val fragmentThree = ThreeFragment()
//      app執行先將fragmentOne載入
        supportFragmentManager.beginTransaction().apply {
            replace(R.id.frame_layout, fragmentOne)
            commit()
        }

        btn_one.setOnClickListener {
            supportFragmentManager.beginTransaction().apply {
                replace(R.id.frame_layout, fragmentOne)
                addToBackStack(null)
                commit()
            }
        }

        btn_two.setOnClickListener {
            supportFragmentManager.beginTransaction().apply {
                replace(R.id.frame_layout, fragmentTwo)
                addToBackStack(null)
                commit()
            }
        }

        btn_three.setOnClickListener {
            supportFragmentManager.beginTransaction().apply {
                replace(R.id.frame_layout, fragmentThree)
                addToBackStack(null)
                commit()
            }
        }
    }
}

以上是非常粗淺的介紹fragment,還有fragment本身相關的動作
以及lifecycle關係到fragment內容改變,畫面切換後等等,需要再了解


上一篇
Day 10--實作app右上方的menu選單
下一篇
Day 12--Fragment Navigation
系列文
程式初學:Android與Kotlin30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言